<template>
  <el-dialog v-model="dialogVisible" width="80%">
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="110px"
    >
      <el-form-item label="产品编号" prop="productNumber">
        <el-input
          v-model="queryParams.productNumber"
          placeholder="请输入产品编号"
          clearable
          @keyup.enter="getList"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="产品名称" prop="productName">
        <el-input
          v-model="queryParams.productName"
          placeholder="请输入产品名称"
          clearable
          @keyup.enter="getList"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="产品图纸图号" prop="partDrawingNumber">
        <el-input
          v-model="queryParams.partDrawingNumber"
          placeholder="请输入产品图纸图号"
          clearable
          @keyup.enter="getList"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="部件编号" prop="partNumber">
        <el-input
          v-model="queryParams.partNumber"
          placeholder="请输入部件编号"
          clearable
          @keyup.enter="getList"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="getList" type="primary">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="multipleTableRef"
      border
      :row-key="getRowKeys"
      default-expand-all
      height="350"
      :tree-props="{ children: 'children' }"
      v-loading="formLoading"
      :data="list"
      class="tableView"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" :reserve-selection="true" :selectable="selectable" />
      <el-table-column label="序号" align="center" type="index" width="80" />
      <el-table-column label="产品编号" align="left" prop="productNumber" :min-width="250" />
      <el-table-column label="产品名称" align="left" prop="productName" :min-width="200" />
      <el-table-column label="产品规格" align="left" prop="productStandard" :min-width="200" />
      <el-table-column label="编号" align="left" prop="code" :min-width="200" />
      <el-table-column label="部件编号" align="left" prop="partNumber" :min-width="200" />
      <el-table-column label="图纸图号" align="left" prop="drawingNumber" :min-width="200" />
      <el-table-column label="部件规格" align="left" prop="partSpecification" :min-width="200" />
      <el-table-column label="材质" align="left" prop="material" :min-width="200" />
      <el-table-column label="规格" align="left" prop="specification" :min-width="200" />
      <el-table-column label="净尺寸（长）" align="left" prop="netSizeLength" :min-width="200" />
      <el-table-column label="净尺寸（宽）" align="left" prop="netSizeWidth" :min-width="200" />
      <el-table-column
        label="下料尺寸（长）"
        align="left"
        prop="cuttingSizeLength"
        :min-width="200"
      />
      <el-table-column
        label="下料尺寸（宽）"
        align="left"
        prop="cuttingSizeWidth"
        :min-width="200"
      />
      <el-table-column label="数量" align="left" prop="completeQuantity" :min-width="200" />
      <el-table-column label="报工工序" align="left" prop="dictProcessName" :min-width="200">
        <template #default="scope">
          {{ getDictLabel('craft_process_name', scope.row.dictProcessName) }}
        </template>
      </el-table-column>
      <el-table-column label="工种" align="left" prop="dictTypeOfWork" :min-width="200">
        <template #default="scope">
          {{
            getDictLabel('config_manufacturing_details_cutting_process', scope.row.dictTypeOfWork)
          }}
        </template>
      </el-table-column>
      <el-table-column label="下料类型" align="left" prop="dictBaitingType" :min-width="200">
        <template #default="scope">
          {{ getDictLabel('config_wage_baiting_type', scope.row.dictBaitingType) }}
        </template>
      </el-table-column>
      <el-table-column label="是否机加" align="left" prop="dictIsMachining" :min-width="100">
        <template #default="scope">
          {{ getDictLabel('is_machining', scope.row.dictIsMachining) }}
        </template>
      </el-table-column>
      <el-table-column label="机加工序" align="left" prop="dictMachiningProcess" :min-width="200">
        <template #default="scope">
          {{ getDictLabel('machining_process', scope.row.dictMachiningProcess) }}
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="footer">
        <!-- 分页 -->
        <Pagination
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
        <div>
          <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
   import { getDictLabel } from '@/utils/dict'
   import * as TransferItemManagementApi from '@/api/orderManagement/transferManagement/transferItemManagement'
   const formLoading = ref(false)
   const dialogVisible = ref(false)
   const list = ref([])
   const multipleTableRef = ref()
   const multipleSelection = ref([])
   const queryFormRef = ref()
   const message = useMessage() // 消息弹窗
   const total = ref(0)
   /** 重置按钮操作 */
   const resetQuery = () => {
     queryFormRef.value.resetFields()
     getList()
   }
   const queryParams = reactive({
     pageNo: 1,
     pageSize: 10,
     productNumber: null,
     productName: null,
     productDrawingNumber: null,
     partNumber: null
   })

   const getRowKeys = (row) => {
     return row.id
     console.log(row.id, 'row')
   }

   // 打开弹窗
   const open = async (obj) => {
     dialogVisible.value = true
     nextTick(() => {
       multipleTableRef.value!.clearSelection()
     })

     multipleSelection.value = []
     await getList()
     if (![null, undefined, ''].includes(obj.productNumber)) {
       nextTick(() => {
         list.value.map((item) => {
           if (item['id'] === obj['id']) {
             multipleTableRef.value!.toggleRowSelection(item, true)
           }
           if (item.children.length) {
             checkRes(item.children,obj)
           }
         })
       })
     }
   }
   //对比选中
   const checkRes = (arr: Array,obj: object) => {
     arr.map((item) => {
       if (item['id'] === obj['id']) {
         multipleTableRef.value!.toggleRowSelection(item, true)
       }
       if (item.children.length) {
         checkRes(item.children,obj)
       }
     })
   }
   defineExpose({ open, multipleSelection }) // 提供 open 方法，用于打开弹窗

   // 获取数据
   const getList = async () => {
     formLoading.value = true
     try {
       const data = await TransferItemManagementApi.getAbnormalMaterial(queryParams)
       total.value = data.total
       list.value = data.list
     } finally {
       formLoading.value = false
     }
   }

   // 多选
   const handleSelectionChange = (val) => {
     multipleSelection.value = val
   }

   const emit = defineEmits(['setAbnormalData'])
   const submitForm = () => {
     if (multipleSelection.value.length > 1) {
       message.warning('只能选择一条异常物料')
       return
     }
     dialogVisible.value = false
     emit('setAbnormalData', multipleSelection.value)
   }
</script>

<style lang="scss" scope>
   .footer {
     display: flex;
     flex-direction: column;
     div {
       display: flex;
       justify-content: flex-end;
     }
   }
</style>